// 函数组件
import React, { useState, useEffect } from 'react';
import { Button, Modal, InputNumber, message, Form, Input, Switch, Select, DatePicker } from 'antd';
import "../css/ZoneDialog.less"
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import getSelectTime from '../../../../utils/date';
// 引入请求api等
import { baseUrl, modZone, addZone } from "../../../../api/operationApi"


// 表格泛型
interface PropsType {
    isModalOpen: boolean
    modStuInfo?: DataType | undefined
    type: string
    currentPage: number
    pageSize: number
    close(): void
    getData(currentPage: number, pageSize: number, keyWord?: string, state?: string, upTime?: string, sortWay?: string): void
}

// 数据类型
interface DataType {
    tsaId: number,   // 序号
    tsaName: string,  // 专区名称
    tsaArrange: string,  // 模板排列
    tsaLocation: number,  // 位置
    tsaUpordown: number,  // 是否上架
    tsaUptimeStart: string, //上架时间开始
    tsaUptimeEnd: string,  // 上架时间结束
    tsaTime: string,   // 上架时间
}

// 表单布局
const layout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 16,
    },
};

// 表单验证
const validateMessages = {
    required: '${label}必填',
    types: {
        number: '${label}必须是数值',
    },
    number: {
        range: '${label}  ${min} 到 ${max} 位',
    },
};
function ZoneDialog(props: PropsType) {
    const [form] = Form.useForm();
    const [title, setTitle] = useState<string>('')

    const { RangePicker } = DatePicker;
    dayjs.extend(customParseFormat);
    const dateFormat = 'YYYY-MM-DD hh:mm:ss';

    useEffect(() => {
        // console.log('%c'+'=========>', 'color: #886CE4;font-weight:bolder','props',props);
        if (props.type == 'add') {
            setTitle('添加专区')
            form.resetFields()
            form.setFieldsValue({
                tsaId: '',
                tsaName: '',
                tsaLocation: null,
                tsaArrange: null,
                tsaUptimeStart: '',
                tsaUptimeEnd: '',
                shelfTimeInterval: '',
                tsaTime: '',
                tsaUpordown: false,
            })
        } else if (props.type == 'mod') {
            setTitle('编辑专区')
            //设置字段默认值
            form.setFieldsValue({
                tsaId: props.modStuInfo?.tsaId,
                tsaName: props.modStuInfo?.tsaName,
                tsaLocation: props.modStuInfo?.tsaLocation,
                tsaArrange: props.modStuInfo?.tsaArrange,
                tsaUptimeStart: props.modStuInfo?.tsaUptimeStart,
                tsaUptimeEnd: props.modStuInfo?.tsaUptimeEnd,
                tsaTime: dayjs(props.modStuInfo?.tsaTime, dateFormat),

                tsaUpordown: props.modStuInfo?.tsaUpordown == 0 ? false : true,

                shelfTimeInterval: [dayjs(props.modStuInfo?.tsaUptimeStart, dateFormat), dayjs(props.modStuInfo?.tsaUptimeEnd, dateFormat)],

            })

        }
    }, [props])


    // 2、点击提交
    const onFinish = async (values: any) => {
        console.log("values", values);
        if (props.type === 'add') {
            let tsaTime: string = ''
            if (values.tsaTime != '') {
                tsaTime = getSelectTime(values.tsaTime)
            }
            console.log('%c' + '=========>', 'color: #886CE4;font-weight:bolder', 'carouselTime', tsaTime);

            let tsaUptimeStart: string = getSelectTime(values.shelfTimeInterval[0])
            let tsaUptimeEnd: string = getSelectTime(values.shelfTimeInterval[1])

            if (tsaTime > tsaUptimeEnd) {
                message.warning('预设上架时间必须小于结束时间')
                return false
            }

            let res = await addZone({
                "tsaArrange": values.tsaArrange,
                "tsaLocation": values.tsaLocation,
                "tsaName": values.tsaName,
                "tsaTime": tsaTime,
                "tsaUpordown": values.tsaUpordown ? 1 : 0,
                "tsaUptimeEnd": tsaUptimeEnd,
                "tsaUptimeStart": tsaUptimeStart
            })
            await props.getData(props.currentPage, props.pageSize)
            message.success('增加成功')
            props.close()

        } else if (props.type === 'mod') {
            let tsaTime: string = getSelectTime(values.tsaTime)
            let tsaUptimeStart: string = getSelectTime(values.shelfTimeInterval[0])
            let tsaUptimeEnd: string = getSelectTime(values.shelfTimeInterval[1])

            if (tsaTime > tsaUptimeEnd) {
                message.warning('预设上架时间必须小于结束时间')
                return false
            }

            let res = await modZone({
                "tsaId": props.modStuInfo?.tsaId,
                "tsaArrange": values.tsaArrange,
                "tsaLocation": values.tsaLocation,
                "tsaName": values.tsaName,
                "tsaTime": tsaTime,
                "tsaUpordown": values.tsaUpordown ? 1 : 0,
                "tsaUptimeEnd": tsaUptimeEnd,
                "tsaUptimeStart": tsaUptimeStart
            })
           
            await props.getData(props.currentPage, props.pageSize)
            message.success('修改成功')
            props.close()
        }
    };

    // 点击表单取消
    const cancel = () => {
        props.close()
    }
    // 点击叉叉取消
    const handleCancel = () => {
        props.close()
    };

    return (
        <div className='ZoneDialog'>
            <Modal centered={true} forceRender width={560} title={title} open={props.isModalOpen} footer={null} onCancel={handleCancel} >
                <Form
                    {...layout}
                    name="zone-form"
                    onFinish={onFinish}
                    validateMessages={validateMessages}
                    form={form}
                >
                    {
                        props.type == 'mod' ? (
                            <Form.Item
                                name='tsaId'
                                label="序号"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                                initialValue={props.modStuInfo?.tsaId}
                            >
                                <Input disabled />
                            </Form.Item>
                        ) : ''
                    }
                    <Form.Item
                        name='tsaName'
                        label="专区标题"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                        initialValue={props.modStuInfo?.tsaName}
                    >
                        <Input placeholder='请输入专区标题' />
                    </Form.Item>

                    <Form.Item
                        name='tsaLocation'
                        label="位置"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                        initialValue={props.modStuInfo?.tsaLocation}
                    >
                        <InputNumber placeholder='位置' min={1} max={10}></InputNumber>
                    </Form.Item>


                    <Form.Item
                        name='tsaArrange'
                        label="专区模板"
                        rules={[
                            {
                                required: true,
                            },
                        ]}
                        initialValue={props.modStuInfo?.tsaArrange}

                    >
                        <Select
                            placeholder='请选择模板'
                            style={{ width: 120 }}
                            allowClear
                            options={[{ value: '单排式', label: '单排式' }, { value: '双列式', label: '双列式' }, { value: '双排双列式', label: '双排双列式' }]}
                        />
                    </Form.Item>

                    <Form.Item
                        name='shelfTimeInterval'
                        label="上架时间段"
                    >
                        <RangePicker showTime />
                    </Form.Item>

                    <Form.Item
                        name='tsaTime'
                        label="预设上架时间"
                        initialValue={props.modStuInfo?.tsaTime}
                    >
                        <DatePicker showTime />
                    </Form.Item>


                    <Form.Item
                        name='tsaUpordown'
                        label="上架"
                        valuePropName='checked'
                        initialValue={props.modStuInfo?.tsaUpordown}
                    >
                        <Switch/>
                    </Form.Item>


                    <Form.Item
                        wrapperCol={{
                            ...layout.wrapperCol,
                            offset: 8,
                        }}
                    >
                        <Button type="primary" htmlType="submit" className='confirm-btn' >确定</Button>
                        <Button type="primary" onClick={cancel} ghost>取消</Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}

export default ZoneDialog